@import "../../../assets/style/global";

@mixin personItemIcon($item-name) {
    &.#{$item-name} {
      background: url('../images/app_'+ $item-name +'.png') no-repeat center;
    }
  }

  $colorGreen: #22b58f;
  $colorRed: #ff5e5e;
  $colorYellow: #ffae65;
  $colorBlue: #22a6ff;

.personal-info{
    .personal-header{
        display: flex;
        .personal-photo{
            width: 110px;
            height: 150px;
            text-align: center;
        }
        .personal-detail{
            display: inline-block;
            margin-left: 50px;
            width: calc(100% - 160px);
            .personal-row{
                height: 30px;
                line-height: 30px;
                .personal-row-level{
                    display: inline-block;
                    text-align: right;
                    float: right;
                    .span-text {
                        display: inline-block;
                        border: 1px solid #49bf9b;
                        color: #49bf9b;
                        width: 50px;
                        text-align: center;
                        height: 30px;
                        line-height: 30px;
                        vertical-align: middle;
                        cursor: pointer;
                        margin-left: 10px;
                    }
                    .mod-btn{
                        color: $blueLight;
                    }
                }
                
            }
        }
    }
    .control-info{
        margin-top: 25px;
       table{
        border-spacing: 2px;
        border-collapse: separate;
        tbody tr{
            height: 30px;
            line-height: 30px;
        }
         tbody tr:nth-child(odd) {
            /* 匹配奇数行 */
            background-color: #e3ecf9;
            color: black;
        }
        
         tbody tr:nth-child(even) {
            /* 匹配偶数行 */
            background-color: #eff4fe;
            color: black;
        }
       }
    }
    .personal-statistic{
        margin-top: 25px;
        display: flex;
        :nth-last-child(1){
            margin: 0!important;
        }
        .statistic-item{
            display: inline-block;
            text-align: center;
            position: relative;
            height: 110px;
            border: 1px solid #e3ecf9;
            width: 155px;
            margin-right: 30px;
            .statistic-img{
                position: absolute;
                top: 50%;
                left: 15px;
                transform: translate(0, -50%);
                width: 42px;
                height: 42px;
                background-size: 100% 100%;
                @include personItemIcon(order);
                @include personItemIcon(warning);
                @include personItemIcon(event);
                @include personItemIcon(phone);
            }
            .statisic-text{
                position: absolute;
                top: 50%;
                left: 87px;
                transform: translate(0, -50%);
            }
            .statistic-tag{
                position: absolute;
                top: -5px;
                right: -2px;
                width: 35px;
                height: 30px;
                display: flex;
                align-items: flex-start;
                padding: 3px 5px;
                color: $grayLight;
                cursor: pointer;
                background: url(../images/warning-red.png) center no-repeat;
                .light{
                    width: 8px;
                    height: 15px;
                    background: url(../images/lighting.png) center no-repeat;
                  }
            }
        }
    }
    .personal-btns{
        text-align: right;
        height: 140px;
        line-height: 140px;
        .statistic-btn{
            margin-left: 30px;
            height: 50px;
            border-radius: 5px;
            &.order{
                background: $colorGreen !important;
            }
            &.warning{
                background: $colorRed !important;
            }
            &.event{
                background: $colorYellow !important;
            }
            &.phone{
                background: $colorBlue !important;
            }
        }
    }
}

.order-info{
    .order-header{
        display: flex;
        border-bottom: 1px solid #e3ecf9;
        height: 40px;
        .order-user{
            width: 24px;
            height: 26px;
            background: url(../images/app_user.png) center no-repeat;
            display: inline-block;
        }
        label{
            margin: 0 35px 0 10px;
        }
        span{
            color: $blueLight;
        }
    }
    .order-content{
        margin-top: 10px;
       .order-list{
        height: calc(65vh - 200px);
        overflow-y: auto;
       }
        .order-row{
            height: 65px;
            line-height: 65px;
            text-align: center;
            .order-col{
                color: #1aa3ff;
                cursor: pointer;
                height: 100%;
                .col-content{
                    justify-content: center;
                    display: flex;
                    .detail{
                        width: 15px;
                        height: 65px;
                        background: url(../images/detail.png) center no-repeat;
                        display: inline-block;
                        transform: rotate(180deg);
                        margin-right: 5px;
                    }
                }
            }
        }
    }
    .order-footer{
        text-align: right;
        margin-top: 10px;
    }
    
    .detail-info{
        margin-top: 20px;
        height: calc(65vh - 200px);
        overflow-y: auto;
    }
    .detail-footer{
        text-align: right;
        .back-btn{
            color: #e1eaf9;
            background: #465279 !important;
        }
    }
    .level-star{
        height: 30px;
        line-height: 30px;
        margin-bottom: 30px;
        margin-top: 20px;
        .star-c{
          font-size: 25px;
          margin-right: 20px;
          color: #49bf9b;
          vertical-align: middle;
          cursor: pointer;
        }
        .span-c{
          display: inline-block;
          border: 1px solid #49bf9b;
          color: #49bf9b;
          width: 50px;
          text-align: center;
          height: 25px;
          line-height: 25px;
          vertical-align: middle;
          cursor: pointer;
        }
      }
}

.detail-header{
    border-bottom: 1px solid #8893A7;
    span {
        border-bottom: 2px solid #4bb7ff;
        height: 100%;
        display: inline-block;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
}
.detail-user{
    margin-top: 10px;
    margin-bottom: 20px;
    color: #a4daff;
}

.custome-width{
    .ant-modal-content{
        width: 720px;
    }
}

.custome-header{
    .ant-modal-header{
        border-bottom: transparent;
    }
}

.info-footer{
    text-align: right;
    margin-top: 10px;
    .back-btn{
        color: #e1eaf9;
        background: #465279 !important;
    }
    .edit {
        background: $colorBlue !important;
    }
    .add {
        background: $colorGreen !important;
    }
}


